<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/css/order.css"/>
	</head>
	<body>
		<header class="header">
				<a  href="/" class="back"><i class="fa fa-angle-left"></i></a>
				<h1>已完成</h1>				
			</header>
		<div id="app">
			<nav class="nav">
				<ul class="nav-ul">
						<li v-for="list in lists"><a :href="list.href"><i class="fa" :class="list.icon"></i>{{list.name}}<span class="badge">{{list.num}}</span></a></li>
				</ul>
			</nav>
			<section>
				<h2 class="hidden">订单信息</h2>
				<div class="top">
					<div class="topleft">
						共计{{allnumber()}}单
					</div>				
				</div>
				<div class="content">
					<ul class="purchasebox" v-if="purchases[0].items.length">
						<li v-for="(purchase,index) in purchases">
							<div class="group">								
								<div class="col-xs-12">采购批次ID：{{purchase.id}}</div>
							</div>
							<div class="group">
								<div class="col-xs-6">采购人：{{purchase.purchaser}}</div>
								<div class="col-xs-6">供货商：{{purchase.supplier}}</div>
							</div>	
							<div class="group">
								<div class="col-xs-12">下单时间：{{purchase.time}}</div>
                            </div>
                            <div class="group">
								<div class="col-xs-12">接受时间：{{purchase.accept_time}}</div>
                            </div>
                            <div class="group">
								<div class="col-xs-12">发货时间：{{purchase.send_time}}</div>
							</div>
                            <div class="group">
								<div class="col-xs-12">完成时间：{{purchase.complete_time}}</div>
							</div>
							<table class="table table-bordered">
								<thead>
									<tr>
										<th class="text-center">序号</th>
										<th class="text-center">商品标题</th>
										<th class="text-center">条码</th>
										<th class="text-center">采购数量</th>
										<th class="text-center">采购单价</th>
										<th class="text-center">小计</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center" v-for="(item,index) in purchase.items" v-if="index>=2?purchase.more:'ture'">
										<td>{{index+1}}</td>
										<td style="width: 120px;">{{item.name}}</td>
										<td style="width: 100px;word-break:break-all;">{{item.barcode}}</td>
										<td>{{item.category}}</td>
										<td>{{item.unitprice}}</td>
										<td>{{(item.num*item.unitprice).toFixed(1)}}</td>
									</tr>
									<tr class="text-center" @click="purchase.more='ture'" v-if="!purchase.more">
										<td colspan="6" class="more">展开全部<i class="fa fa-caret-down" style="margin-left: 5px;"></i></td>
									</tr>
									<tr class="text-center">
										<td colspan="6">共{{purchase.items.length}}条，合计：{{allmoney(index)}}元，结账方式：{{purchase.mode}}</td>
									</tr>
								    <tr>
								    	<td colspan="6">
                                            <p class="remarks"> 交货时间：收到订单之日起48小时内；</p>
                                            <p class="remarks">订单价格：以本订货单为准。送货到我司仓库及门店视为对本订货单内容的认可；</p>
                                            <p class="remarks">订货单经三方签字，作为与我司财务对账依据；</p>
                                            <p class="remarks">如遇列表中商品降价的情形，则需告知我司，该类商品价格按降价后的价格执行。</p>
								    	</td>
								    </tr>
								    <tr>
								    	<td colspan="6">
								    		<div class="infotext">
												<p style="padding: 8px 0;"><span style="margin-right: 20px;">司机：{{purchase.info.name}}</span><span>电话：{{purchase.info.tel}}</span></p>
												<p>车牌号：{{purchase.info.license}}</p>
											</div>
								    	</td>
								    </tr>
								</tbody>
							</table>							
						</li>
					</ul>
					<ul class="refundbox" v-if="refunds[0].items.length">
						<li v-for="(refund,index) in refunds">
							<div class="group">							
								<div class="col-xs-12">退货批次ID：{{refund.id}}</div>						
							</div>
							<div class="group">
								<div class="col-xs-6">采购人：{{refund.purchaser}}</div>
								<div class="col-xs-6">供货商：{{refund.supplier}}</div>
							</div>	
							<div class="group">
								<div class="col-xs-12">下单时间：{{refund.time}}</div>
							</div>
							<table class="table table-bordered">
								<thead>
									<tr>
										<th class="text-center">序号</th>
										<th class="text-center">商品标题</th>
										<th class="text-center">条码</th>
										<th class="text-center">退货数量</th>
										<th class="text-center">采购单价</th>
										<th class="text-center">小计</th>
										<th class="text-center">退货原因</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center" v-for="(item,index) in refund.items" v-if="index>=2?refund.more:'ture'">
										<td>{{index+1}}</td>
										<td style="width: 120px;">{{item.name}}</td>
										<td >{{item.barcode}}</td>
										<td>{{item.num}}</td>
										<td>{{item.unitprice}}</td>
										<td>{{(item.num*item.unitprice).toFixed(1)}}</td>
										<td>{{item.reason}}</td>
									</tr>
									<tr class="text-center" @click="refund.more='ture'" v-if="!refund.more">
										<td colspan="7" class="more">展开全部<i class="fa fa-caret-down" style="margin-left: 5px;"></i></td>
									</tr>
									<tr class="text-center">
										<td colspan="7">共{{refund.items.length}}条，合计：{{allmoney(index)}}元，结账方式：{{refund.mode}}</td>
									</tr>
									<tr>
								    	<td colspan="7">
								    		<div class="infotext">
												<p style="padding: 8px 0;"><span style="margin-right: 20px;">司机：{{refund.info.name}}</span><span>电话：{{refund.info.tel}}</span></p>
												<p>车牌号：{{refund.info.license}}</p>
											</div>
								    	</td>
								    </tr>
								</tbody>
							</table>
						</li>
					</ul>
				</div>
			</section>
		</div>
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
                    lists:[{href:"/index/neworder",name:"新订单",num:"",icon:"fa-file-text-o"},{href:"/index/delivery",name:"待发货",num:"",icon:"fa-inbox"},{href:"/index/receipt",name:"待收货",num:"",icon:"fa-truck"},{href:"/index/arrived",name:"已完成",num:"",icon:"fa-check-square"},{href:"/index/cancel",name:"已取消",num:"",icon:"fa-frown-o"}],
                    purchases:[{info:{name:"",tel:"",license:""},items:[]}],
                    refunds:[{info:{name:"",tel:"",license:""},items:[]}]
                },
				methods:{
                    allnumber:function(){
                        var purchases = this.purchases.length;
                        var refunds = this.refunds.length;
                        if(!this.purchases[0].items.length){
                            purchases = 0;
                        }
                        if(!this.refunds[0].items.length){
                            refunds = 0;
                        }
                        return purchases+refunds;
                    },
					allmoney:function(n){
						var money = 0;
						for(var i in this.purchases[n].items){
							money += this.purchases[n].items[i].num*this.purchases[n].items[i].unitprice;
						}
						return money.toFixed(1);
					}
				},
				created:function(){
						this.$http.get('/order/complete_info',{emulateJSON: true}).then(function(res){		//初始化赋值
                            if(res.data.data.length){
                                this.purchases = res.data.data;
                            }
                            for(var i in res.data.date) {
                                if (res.data.date[i] == 0) {
                                    this.lists[i].num = "";
                                } else {
                                    this.lists[i].num = res.data.date[i];
                                }
                            }
						},function(){
							
						});	
				}
			});
		</script>
	</body>
</html>
